<%--
  Created by IntelliJ IDEA.
  User: august_Ld
  Date: 2022/5/13
  Time: 14:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>


<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登陆</title>
    <base href="<%=basePath%>">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>

<div class="container">
    <h1 style="text-align: center;height: 300px;line-height: 300px">用户管理系统-登陆</h1>
    <%--    <div class="row" >--%>
    <%--        <div class="col-md-3" >--%>
    <%--            --%>
    <%--        </div>--%>
    <%--    </div>--%>
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <form action="user/login" method="post">
                <div class="form-group" id="profile" >

                </div>
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" class="form-control" id="username" name="username" placeholder="用户名">
                    <span style="color: red"  id="msg"></span>
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" class="form-control" id="password" name="password" placeholder="密码">
                </div>

                <div class="form-group">
                    <label for="password">验证码</label>
                    <input type="password" class="form-control" id="verify" name="verify" placeholder="验证码">
                    <img src="user/verification" id="verification">
                </div>


                <button type="submit" class="btn btn-default">登陆</button>
            </form>
        </div>
        <div class="col-md-3"></div>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.js"></script>

<script src="static/js/axios.min.js"></script>
<script>
    let usernameInput = document.getElementById("username");
    usernameInput.addEventListener("blur",function (){
        $.post("user/getProfile",{username:usernameInput.value},
            function (data){
                if (data) {
                    document.getElementById("profile").innerHTML = "<img style='width:100px' src='"+ data + "'/>"
                }else{
                    document.getElementById("profile").innerHTML = ""
                }
            })
    })


    document.getElementById("verification").addEventListener("click",function (){
        document.getElementById("verification").setAttribute('src',"user/verification")
        console.log(1)
    })


</script>
</body>
</html>
